<template>
  <div>
    <h1>App</h1>
    <p>count:{{ count }}</p>
    <p>doubleCount:{{ $store.getters.doubleCount }}</p>
    <p>doubleCount:{{ abc }}</p>
    <button @click="increment">累加count</button>
    <button @click="incrementN({ n: 2 })">累加N count</button>
    <button @click="decrement">累减count</button>
    <button @click="incrementWait">等两秒再累加count</button>
    <button @click="incrementNWait(5)">等两秒累加N count</button>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
export default {
  name: 'App',
  mounted() {
    console.log(this, 'app');
  },
  /*
     辅助函数的参数除了数组以外，还可以是一个对象
     因为如果用数组的话，生成的函数名或者计算属性等名称和vuex的值的名称一致
     有的时候，为了防止命名冲突，我们可以选择使用对象写法，对象的key就是在组件中的命名，对象value就是vuex中的命名
  */
  computed: {
    ...mapState(['count', 'num']),
    // abc() {
    //   return this.$store.getters.doubleCount;
    // },
    ...mapGetters({ abc: 'doubleCount' }),
  },
  methods: {
    increment() {},
    ...mapMutations({
      increment: 'increment',
      decrement: 'decrement',
      incrementN: 'incrementN',
    }),
    // incrementWait() {
    //   this.$store.dispatch('incrementWait');
    // },
    // incrementNWait(n) {
    //   this.$store.dispatch('incrementNWait', n);
    // },
    ...mapActions(['incrementWait', 'incrementNWait']),
  },
};
</script>
<style></style>
